<script>
import { SLMDict } from '@/api/dataDict'
export default {
  name: 'CListItem',
  // abstract: true,
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number, Array],
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    dictTypeCode: {
      type: String,
      default: undefined
    },
    labelWidth: {
      type: String,
      default: 'auto'
    },
    sep: {
      type: String,
      default: ''
    },
    span: {
      type: Number,
      default: 1
    },
    to: {
      type: Object,
      default: undefined
    },
    zero: {
      type: String,
      default: ''
    },
    one: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: undefined
    },
    dataValue: {
      type: String,
      default: 'value'
    },
    dataLabel: {
      type: String,
      default: 'label'
    },
    suffix: {
      type: String,
      default: ''
    },
    clickable: {
      type: Boolean,
      default: false
    },
    prop: {
      type: String,
      default: ''
    },
    formatTime: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showValue: ''
    }
  },
  computed: {
    showLabel() {
      if (this.label === '') return ''
      return this.label + this.sep
    },
    isLink() {
      return this.to !== undefined
    },
    zeroOne() {
      return this.zero !== '' && this.one !== ''
    }
  },
  watch: {
    value: {
      handler(v) {
        if (/^\d+$/.test(v)) {
          v = v.toString()
        }
        this.showValueByData(v)
        this.getDictName(v)
        this.zeroOneValue(v)
      },
      immediate: true
    },
    data() {
      this.showValueByData(this.value)
    }
  },
  created() {
  },
  methods: {
    formDate(v) {
      if (!this.formatTime) {
        return v
      }
      return /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(v) ? v.replace(/ \d{2}:\d{2}:\d{2}/, '') : v
    },
    getDictName(v) {
      if (this.dictTypeCode === undefined) return
      SLMDict(this.dictTypeCode).then(res => {
        const str = []
        if (typeof v === 'string') {
          v = v.split(',')
        }
        if (!(v instanceof Array)) {
          v = [v]
        }
        for (const d of res.data) {
          if (v.includes(d.dictCode)) {
            str.push(d.dictName)
          }
        }
        this.showValue = str.join(',') || v.join(',')
      })
    },
    clickValueHandle() {
      if (this.isLink) {
        this.$router.push(this.to)
      }
    },
    zeroOneValue(v) {
      if (!this.zeroOne) return
      v = v.toString()
      if (v === '1') {
        this.showValue = this.one
      } else if (v === '0') {
        this.showValue = this.zero
      }
    },
    showValueByData(v) {
      if (this.data === undefined || !(this.data instanceof Array)) {
        this.showValue = v
        return
      }
      const str = []
      if (typeof v === 'string') {
        v = v.split(',')
      }
      if (!(v instanceof Array)) {
        v = []
      }
      for (const item of this.data) {
        if (v.includes(item[this.dataValue])) {
          str.push(item[this.dataLabel])
        }
      }
      this.showValue = str.join(',') || v.join(',')
    },
    resetField(...args) {
      return this.$refs.formItem.resetField(...args)
    },
    clearValidate(...args) {
      return this.$refs.formItem.clearValidate(...args)
    }
  },
  render(h) {
    const slot = this.$scopedSlots.default
    const childs = []
    if (!slot) {
      if (!this.isLink) {
        if (this.type && this.showValue) {
          childs.push(h('el-input', { props: { value: this.formDate(this.showValue) + this.suffix, disabled: true, type: this.type, autosize: { minRows: 2, maxRows: 6 }}}))
        } else {
          childs.push(h('span', { class: { clickable: this.clickable, value: true }}, this.formDate(this.showValue) + this.suffix))
        }
      } else {
        childs.push(h('router-link', { props: { to: this.to }}, this.formDate(this.showValue) + this.suffix))
      }
    } else {
      const t = slot()
      for (const c of t) {
        const opt = c.data || {}
        const s = opt.style || {}
        s.width = '100%'
        opt.style = s
        c.data = opt
      }
      childs.push(t)
    }
    const options = {
      props: {
        label: this.showLabel,
        labelWidth: this.type ? '' : this.labelWidth,
        prop: this.prop,
        ...this.$attrs
      },
      ref: 'formItem'
    }
    this.prop ? options.key = this.prop : ''
    return h('el-form-item', options, childs)
  }
}
</script>
<style lang="scss" scoped>
.c-list-item{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 14px;
  line-height: 28px;
  box-sizing: border-box;
  .c-list-item-label{
    color: #606266;
    padding-right: 12px;
    flex: 0 0 auto;
  }
  .c-list-item-value{
    color: #333;
    flex: 1 1 auto;
  }
}
.clickable{
  cursor: pointer;
  color: #37ad85;
}
.value {
  white-space: pre-wrap
}
</style>
